<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">

<!-- www.phpied.com/conditional-comments-block-downloads/ -->
<!--[if IE]><![endif]-->

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame  -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kameleon</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- CSS - Setup -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/grid.css" rel="stylesheet" type="text/css" />
<!-- CSS - Theme -->
<link id="theme" href="css/themes/light.css" rel="stylesheet" type="text/css" />
<link id="color" href="css/themes/blue.css" rel="stylesheet" type="text/css" />

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>
</head>

<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
<!--<![endif]-->
<div id="wrapper"> 



<!-- start header -->
  <header> 
    <!-- logo -->
    <h1 id="logo"><a href="index.html">Kameleon</a></h1>
    <!-- nav -->
    <nav>
<ul id="nav">
	<li class="current"><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a>
    
    <ul>
    <li><a href="about.html">Who We Are</a></li>
    <li><a href="#">Misc Examples</a>
    <ul>
    <li><a href="grid.html">Column Examples</a></li>
    <li><a href="misc.html">Styled Elements</a></li>
    </ul>
    </li>
    </ul>
    
    </li>
	<li><a href="portfolio.html">Portfolio</a>
    
    <ul>
    <li><a href="portfolio.html">3 Column Portfolio</a></li>
    <li><a href="portfolio-list.html">Portfolio List</a></li>
    </ul>
    
    </li>	
	<li><a href="services.html">Services</a>
    <ul>
    <li><a href="pricing.html">Pricing Table</a></li>
    </ul>
    </li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>
<br class="cl" />
    </nav>
  <br class="cl" />  
  </header>
  <!-- end header --> 

  <!-- page container -->
  <div id="page"> 
  
<div id="feature">
<img class="feature-img" src="img/screenshot.png" alt="">
<div class="feature-text">
<h2 id="tagline">Your Product, Right Here.</h2>
<h3 id="tagline-mini">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<ul class="feature-screenshots">
<li><img class="inlinepic" src="img/screenshots/buttons.jpg" height="50" width="50" alt="" /></li>
            <li><img class="inlinepic" src="img/screenshots/gallery.jpg" height="50" width="50" alt="" /></li>
            <li><img class="inlinepic" src="img/screenshots/calendars.jpg" height="50" width="50" alt="" /></li>
            <li><img class="inlinepic" src="img/screenshots/charts.jpg" height="50" width="50" alt="" /></li>
           <li> <img class="inlinepic" src="img/screenshots/coding.jpg" height="50" width="50" alt="" /></li>
           <li><img class="inlinepic" src="img/screenshots/docs.jpg" height="50" width="50" alt="" /></li>
           <li> <img class="inlinepic" src="img/screenshots/forms.jpg" height="50" width="50" alt="" /></li>
           <li> <img class="inlinepic" src="img/screenshots/gallery.jpg" height="50" width="50" alt="" /></li>
</ul>
<br class="cl" />
<button class="blue">Sign Up</button> <button class="black">Tour</button>
</div>
<br class="cl" />
</div>




    <div id="page-content" class="container_12">
      <h2 class="ribbon">Features</h2>
      <div class="triangle-ribbon"></div>
<br class="cl" />

      <div class="grid_4 feature">
        <h3>Download</h3>
        <img src="img/features/box_address.png" height="48" width="48" alt="design" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Wizard</h3>
        <img src="img/features/magic_wand.png" height="48" width="48" alt="design" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Analyse</h3>
        <img src="img/features/monitor.png" height="48" width="48" alt="design" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Options</h3>
        <img src="img/features/preferences.png" height="48" width="48" alt="coding" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Security</h3>
        <img src="img//features/lock_closed.png" height="48" width="48" alt="seo" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Support</h3>
        <img src="img/features/security.png" height="48" width="48" alt="icon design" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <br class="cl" />
      <br />
      <h2 class="ribbon blue">Screenshots</h2>
      <div class="triangle-ribbon blue"></div>
<br class="cl" />


<!-- "previous page" action -->
<a class="prev browse left"></a>
<div id="browsable" class="scrollable">   
   
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
      <div>
         <img src="img/screenshots/buttons.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/gallery.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/calendars.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/charts.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/coding.jpg" height="100" width="100" alt="" />
      </div>
      
      <!-- 5-10 -->
      <div>
         <img src="img/screenshots/docs.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/forms.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/gallery.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/notifications.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/pagination.jpg" height="100" width="100" alt="" />
      </div>
      
      <!-- 10-15 -->
      <div>
         <img src="img/screenshots/psd.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/switches.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/tabs.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/themes.jpg" height="100" width="100" alt="" />
            <img src="img/screenshots/tips.jpg" height="100" width="100" alt="" />
      </div>
      
   </div>
   
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
<br />


    </div>
    <br class="cl" />
  </div>
  <!-- footer Start -->
  <footer>
    <ul class="footer-nav">
      <li><a href="index.html">Home</a> |</li>
      <li><a href="about.html">About</a> |</li>
      <li><a href="portfolio.html">Portfolio</a> |</li>
      <li><a href="services.html">Services</a> |</li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <p>Copyright ©2010, A <a href="http://www.mudodesigns.com">Mudo Design</a> for <a href="http://themeforest.net?ref=ChrisMooney">Theme Forest</a>.</p>
    <br class="cl" />
  </footer>
  <!-- footer end --> 
  
  <!-- Javascript at the bottom for fast page loading --> 
  <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
  <script src="js/jquery.tools.min.js" type="text/javascript"></script> 
  <script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> 
  <script src="js/jquery.form.js" type="text/javascript"></script> 
  <script src="js/cufon-yui.js" type="text/javascript"></script> 
  <script src="js/Aller.font.js" type="text/javascript"></script> 
  <script src="js/jquery.tipsy.js" type="text/javascript"></script> 
  <script src="js/functions.js" type="text/javascript"></script> 
  <!--[if lt IE 7 ]>
    <script src="js/dd_belatedpng.js"></script>
  <![endif]--> 
</div>
</body>
</html>